<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			父级：{{num}}  <button @click="num++">++</button>
			<no1 :num="num" :fun="mfun"></no1>
		</div>
		<template id="no1">
			<div>
				num : {{num}}<br>
				组件1：{{n_num}}  <button @click="btn">++</button>
			</div>
		</template>
	</body>
	<script src="../js/vue.js"></script>
	<script>
		Vue.component('no1',{
			template:"#no1",
			props:['num','fun'],
			data(){
				return {
				  n_num:this.num
				}
			},
			methods:{
			   btn(){
			   	this.n_num++
			    this.fun(this.n_num)
			   }
			},
			// 父级改变子级也改变
			watch:{
				num(a,b){
					this.n_num = a
				}
			}
		})
		new Vue({
			el:"#box",
			data:{
				num:0
			},
			methods:{
				mfun(num){
					this.num = num
				}
			}
		})
	</script>
</html>
